<template>
	<view class="content" :style="{height:winH}">
		<view class="detail-top">
			<view class="left">
				<text>管家：<span>张三</span></text>
			</view>
			<view class="right">
				{{title}}
			</view>
		</view>
		<view class="detail-content">
			<view class="detail-item">
				<view class="left">
					<text>管家服务</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='新租'||title=='员工入住评价'">
				<view class="left">
					<text>房屋环境</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='续租'">
				<view class="left">
					<text>物业服务</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='新租'||title=='续住'||title=='员工入住评价'">
				<view class="left">
					<text>物业环境</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='新租'||title=='员工入住评价'">
				<view class="left">
					<text>周边配套</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='新租'||title=='员工入住评价'">
				<view class="left">
					<text>入住满意度</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='新租'">
				<view class="left">
					<text>线上运营</text>

				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='续租'">
				<view class="left">
					<text>续租便捷度</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='续租'">
				<view class="left">
					<text>整体满意度</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='退租'||title=='员工迁出'">
				<view class="left">
					<text>居住舒适度</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='退租'">
				<view class="left">
					<text>退租便捷度</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='员工迁出'">
				<view class="left">
					<text>迁出便捷度</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
			<view class="detail-item" v-show="title=='退租'||title=='员工迁出'">
				<view class="left">
					<text>二次入住与推荐</text>
				</view>
				<view class="right">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>

			<view class="detail-jy">
				<view class="left">
					<text>您的建议</text>
				</view>
				<view class="right">
					<u--textarea style="width: 100%;" v-model="value2" placeholder="请输入内容" count autoHeight
						maxlength='150'></u--textarea>
				</view>
			</view>
			<view class="detail-jy">
				<view class="left">
					<text>上传图片</text>
				</view>
				<view class="right">
					<u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="5" multiple
						:maxCount="3"></u-upload>
					<text style="color: #8D8D8D;">提示: 最多上传3张图片</text>
				</view>
			</view>
		</view>
		<view class="detailBtn" @click="detailSubmit">
			提交评价
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				winH: "",
				scrollH: "",
				count: 5,
				value: 2,
				value2: '',
				fileList5: [],
				title: '新租'
			}
		},
		onLoad() {
			this.winH = uni.getWindowInfo().windowHeight + "px";
			this.scrollH = (uni.getWindowInfo().windowHeight - 88) + "px";
		},
		methods: {
			detailSubmit() {
				uni.setNavigationBarTitle({
					title: '评价详情'
				})
				
			},
			deletePic(event) {
				// this.thumb1.splice(event.index, 1)
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {

				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				console.log(this[`fileList${event.name}`].length, 'evebt');
				lists.map(item => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://api.rzintkeji.com/api/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: res => {
							var shuju = JSON.parse(res.data);
							// this.thumb.push(shuju.data.file_path);
							this.thumb = shuju.data.file_path;
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						}
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		padding-top: var(--status-bar-height);
		position: relative;
		overflow-y: scroll;
		// justify-content: space-between;
		padding: 24rpx;
		// box-sizing: border-box;

		// padding-top: 120rpx;
		.detail-top {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			box-sizing: border-box;
			align-items: center;
			font-weight: 600;
			box-shadow: 0 6rpx 12px 2rpx rgba(26, 138, 236, 0.10);
			border-radius: 10rpx;
			margin-bottom: 15rpx;

			.left {
				width: 50%;
			}

			.right {
				// min-width: 100rpx;
				box-sizing: border-box;
				padding: 0 10rpx;
				min-height: 50rpx;
				line-height: 50rpx;
				background-color: #AEBBED;
				border-radius: 15rpx;
				text-align: center;
				color: #fff;
				font-weight: normal;
			}
		}

		.detail-content {
			width: 100%;
			min-height: 300rpx;
			background-color: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			font-weight: 600;
			box-shadow: 0 6rpx 12px 2rpx rgba(26, 138, 236, 0.10);
			border-radius: 10rpx;
			margin-bottom: 30rpx;

			.detail-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ccc;
				padding-bottom: 10rpx;
			}

			.detail-jy {
				.left {
					margin: 10rpx 0;
				}

				.right {
					width: 100%;
					min-height: 100rpx;
				}
			}

		}

		.detailBtn {
			width: 80%;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #5E79DA;
			border-radius: 10rpx;
			margin: auto;
		}

	}
</style>